<template>
  <div class="container">
    <div class="top">
      <div class="left">项目列表</div>
      <el-button class="border" @click="isShowAdd=true">创建招标项目</el-button>
    </div>
    <div class="table-box">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column v-for="(item) in columns" :key="item.key" :fixed="item.fixed" :prop="item.key" :label="item.title">
          <template slot-scope="scope">
            <el-button v-if="item.key == 'operate'" @click="handleClick(scope.row)" type="text" size="small">发布</el-button>
            <div v-else-if="item.key == 'status'">
              <el-tag effect="dark">
                未开始
              </el-tag>
              <el-tag effect="dark" type="warning" style="background-color: #ED7B2F;">
                进行中
              </el-tag>
              <el-tag effect="dark" type='info'>
                已结束
              </el-tag>
            </div>
            <div v-else-if="item.key == 'sort'">{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</div>
            <div v-else>{{ scope.row.data }}</div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 200, 300, 400]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="13">
      </el-pagination>
    </div>
    <el-dialog title="创建招标" :visible.sync="isShowAdd" class="pass-form" width="620px">
      <el-form :model="ruleForm" label-width="140px" >
        <el-form-item label="项目名称：" prop="name">
          <el-input type="text" v-model="ruleForm.name" placeholder="请输入项目名称" autocomplete="off" maxlength="30" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="单次竞标降价幅度：" prop="name">
          <el-input placeholder="请输入内容" v-model="ruleForm.name">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="启动时间：" prop="name">
          <div class="posi-div">
            <el-date-picker
              v-model="ruleForm.date"
              type="datetime"
              placeholder="选择时间">
            </el-date-picker>
            <i class="posi-icon el-icon-date"></i>
          </div>
        </el-form-item>
        <el-form-item label="单轮报价限制时间：" prop="name">
          <el-input placeholder="请输入内容" v-model="ruleForm.name">
            <template slot="append">分</template>
          </el-input>
        </el-form-item>
        <el-form-item label="初始价格：" prop="name">
          <el-input placeholder="请输入内容" v-model="ruleForm.name">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="参与方：" prop="name">
          <el-input type="text" v-model="ruleForm.name" placeholder="请输入项目名称" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowAdd = false">取 消</el-button>
        <el-button type="primary" @click="isShowAdd = false">创 建</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '排序',
          key: 'sort',
        },
        {
          title: '项目名称',
          key: 'name',
        }, {
          title: '创建人',
          key: 'people',
        }, {
          title: '创建时间',
          key: 'time',
        }, {
          title: '状态',
          key: 'status',
        }, {
          title: '发布状态管理',
          key: 'status1',
        }, {
          title: '单次竞标降价幅度',
          key: 'once',
        }, {
          title: '启动时间',
          key: 'begin',
        },
        {
          title: '单轮报价限制时间',
          key: 'onceTime',
        }, {
          title: '初始价格',
          key: 'beginPrice',
        }, {
          title: '参与方',
          key: 'all',
        }, {
          title: '操作',
          key: 'operate',
          fixed: 'right'
        },
      ],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }],
      currentPage: 1,
      pageSize: 10,
      isShowAdd: false,
      ruleForm: {
        name: '',
        date:''
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.tableData = [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }]
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  margin: 40px 100px;
  background: #fff;

  .top {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid #E1E1E1;

    .border {
      height: 32px;
      line-height: 32px;
      width: 116px;
      text-align: center;
      padding: 0;
      border-color: #006FE1;
      color: #006FE1;
      font-weight: 400;
    }
  }

  .table-box {
    padding: 32px;
  }

  ::v-deep .el-table th.el-table__cell {
    background-color: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.85);
  }
  .pass-form ::v-deep .el-dialog__body{
    border-top: 1px solid #E7E7E7;
    border-bottom: 1px solid #E7E7E7;
  }
  .pass-form ::v-deep .el-dialog__footer{
    padding-top: 20px;
  }
  .el-form-item:last-of-type{
    margin-bottom: 0;
  }

  .el-pagination {
    text-align: right;
    margin-top: 10px;
  }
  .el-date-editor.el-input, .el-date-editor.el-input__inner{
    width: 100%;
  }
  ::-webkit-input-placeholder{
    color: rgba(0, 0, 0, 0.4);
  }
  ::v-deep .el-date-editor .el-input__prefix{
    display: none;
  }
  ::v-deep .el-date-editor  .el-input__suffix{
    right: 24px;
  }
  ::v-deep .el-date-editor .el-input__inner{
    padding-left: 15px;
    padding-right: 55px;
  }
  .posi-div{
    position: relative;
    .posi-icon{
      position: absolute;
      right: 8px;
      top: 50%;
      color: rgba(0,0,0,0.4);
      transform: translateY(-50%);
    }
  }
}
</style>